<template>
    <div class="order">
<!--        <div class="order-input">-->
<!--            <img src="../../../static/image/search.png" alt="">-->
<!--            <input type="text" placeholder="请输入关键字搜索" placeholder-class="phcolor">-->
<!--        </div>-->
        <van-search  use-action-slot :value="searchValue" @change="handelChangeInput" background="transparent" placeholder="请输入搜索关键词" >
            <div slot="action" @click="onSearch">搜索</div>
        </van-search>
<!--        0-待处理 2-已忽略 4-已完成-->
        <div class="tabs">
            <div :class="['tab-item', currentTabName === '0' ? 'active' : '']" @click="handleOne">待处理</div>
            <div :class="['tab-item', currentTabName === '2' ? 'active' : '']" @click="handleTow">已忽略</div>
            <div :class="['tab-item', currentTabName === '4' ? 'active' : '']" @click="handleThree">已完成订单</div>
            <div class="line" :style="{left: lineLeft}"></div>
        </div>
        <div style="flex-grow: 1;overflow:hidden;">
            <scroll-view
                style="height: 100%;"
                scroll-y="true"
                @scrolltolower="handleScrolltolower">
                <div class="order-item" v-for="item in dataList" :key="item.orderId">
                    <div style="display: flex;margin-bottom: 16px">
                        <div class="order-avatar">
                            <img :src="item.consigneeAvatar" alt="">
                        </div>
                        <div class="order-top-des">
                            <div class="title">{{ item.consigneeName }}</div>
                        </div>
                    </div>
                    <div class="order-item-middle">
                        <img :src="item.imgUrl" alt="">
                        <div class="order-item-form">
                            <div class="order-item-form-item">发送时间：<span>{{ item.sendTime }}</span></div>
                            <div class="order-item-form-item">联系方式：<span>{{ item.telephone }}</span></div>
                        </div>
                    </div>
                    <div class="submit-btn-box" v-if="currentTabName == 0">
                        <div class="submit-btn" @click="handleIgnorePrint(item)" style="background-color: #E6E7EA;color: #303030">忽略打印</div>
                        <div class="submit-btn" @click="handleConfirmPrint(item)">确认打印</div>
                    </div>
                    <div class="submit-btn-box" style="display: flex;justify-content: flex-end" v-if="currentTabName == 2">
                        <div class="submit-btn"  @click="handleRollbackPrint(item)">回滚打印</div>
                    </div>
                </div>
                <div style="text-align: center;padding: 16px 0;line-height: 18px;color: rgba(31, 34, 45, 0.54);font-size: 14px">
                    {{ loadingText() }}
                </div>
            </scroll-view>
        </div>
    </div>
</template>

<script>
import {orderRequest} from "@/api";

export default {
    name: "index",
    data() {
        return {
            searchValue: '',
            pageNo: 1,
            pageSize: 20,
            total: 0,
            dataList: [
            ],
            lineLeft: '10px',
            currentTabName: '0'
        }
    },
    onShow() {
        this.pageNo = 1
        this.total = 0
        this.dataList = []
        this.getPageList()
    },
    methods: {
        handelChangeInput(value) {
            this.searchValue = value.detail
        },
        onSearch() {
            this.reset()
            this.getPageList()
        },
        getPageList() {
            orderRequest.list({
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                keyword: this.searchValue,
                type: this.currentTabName
            }).then(res => {
                this.dataList = [...this.dataList, ...res.data.data]
                this.total = res.data.total
            })
        },
        reset() {
          this.pageNo = 1
          this.dataList = []
          this.total = 0
        },
        //  滚动到底部触发加载更多数据
        handleScrolltolower() {
            let len = this.dataList.length
            if(len >= this.total) {
                return
            }
            this.pageNo += 1
            this.getPageList()
        },
        loadingText() {
            if (this.dataList.length < this.total) {
                return '加载中'
            } else {
                return  '没有更多数据了！'
            }
        },
        handleOne() {
            this.lineLeft = '10px'
            this.currentTabName = '0'
            this.reset()
            this.getPageList()
        },
        handleTow() {
            this.lineLeft =' calc(33.33%  + 10px)'
            this.currentTabName = '2'
            this.reset()
            this.getPageList()
        },
        handleThree() {
            this.lineLeft =' calc(66.66%  + 10px)'
            this.currentTabName = '4'
            this.reset()
            this.getPageList()
        },
        handleIgnorePrint(item) {
            console.log(item)
            orderRequest.ignorePrint(item.orderId).then(res => {
                this.reset()
                this.getPageList()
            })
        },
        handleConfirmPrint(item) {
            orderRequest.confirmPrint(item.orderId).then(res => {
                this.reset()
                this.getPageList()
            })
        },
        handleRollbackPrint(item) {
            orderRequest.confirmPrint(item.orderId).then(res => {
                this.reset()
                this.getPageList()
            })
        }
    }
}
</script>

<style lang="less">
.van-search {
    padding: 0 !important;
}
.order {
    width: 100vw;
    height: 100vh;
    padding: 16px;
    overflow: hidden;
    background-color: #FBFBFB;
    display: flex;
    flex-direction: column;
    .order-input {
        width: 100%;
        border-radius: 6px;
        color: #999999;
        height: 48px;
        line-height: 48px;
        background-color: #F5F6FB;
        padding: 0 16px;
        display: flex;
        align-items: center;
        .phcolor {
            color: #999999;
            font-size: 14px;
        }
        img {
            width: 16px;
            height: 16px;
            margin-right: 6px;
        }
    }
    .tabs {
        display: flex;
        align-items: center;
        position: relative;
        padding: 16px 5px 10px;
        .tab-item {
            width: 33.33%;
            color: #8f8f94;
            font-size: 14px;
            font-weight: 400;
            &.active {
                color: #000;
            }
        }
        .line {
            position: absolute;
            left: 10px;
            bottom: 0;
            width: 20px;
            height: 3px;
            border-radius: 2px;
            background-color: #5581FA;
            transition: left 0.3s;
        }
    }
    .order-item {
        background-color: #FFFFFF;
        border-radius: 15px;
        margin-top: 6px;
        padding: 16px;
        .order-avatar {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            background-color: #FBFBFB;
            margin-right: 16px;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .order-top-des {
            .title {
                font-size: 14px;
                color: #303030;
                margin-bottom: 10px;
            }
            .des {
                font-size: 12px;
                color: #999999;
                line-height: 16px;
            }
        }
        .order-item-middle {
            display: flex;
            margin-bottom: 20px;
            img {
                flex-shrink: 0;
                width: 120px;
                height: 120px;
                border-radius: 6px;
                overflow: hidden;
                margin-right: 12px;
            }
            .order-item-form {
                flex-grow: 1;
                .order-item-form-item {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 6px;
                    font-size: 12px;
                    color: #8f8f94;
                    span {
                        flex-grow: 1;
                        color: #999999;
                    }
                }
            }
        }
        .submit-btn-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .submit-btn {
                width: 48%;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                text-align: center;
                color: #FFFFFF;
                background-color: #5581FA;
                border-radius: 6px;
            }
        }
    }
}
</style>